<!--
 * @Author: your name
 * @Date: 2021-04-19 13:40:06
 * @LastEditTime: 2021-07-26 15:35:11
 * @LastEditors: Please set LastEditors
 * @Description: 导出Modal
 * @FilePath: \dolphin-data-center-front-end\src\pages\owns\exportModal.vue
-->
<template>
  <a-modal :z-index="99" :visible="addInfoModal" :dialog-style="{ top: '180px',left:'260px' }" title="补充信息" width="604px" @cancel="handleCancel">
    <a-form-model ref="addInfo" :model="addInfoState" :rules="addInfoRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item v-if="typeName == '公积金补缴异常' || typeName == '社保补缴异常'" label="补缴月份" prop="makeUpMonth">
        <a-select mode="multiple" :value="addInfoState.makeUpMonth" placeholder="请选择补缴月份" style="width: 420px" @change="handleChangeMakeUpMonth">
          <a-select-option v-for="i in makeUpMonthList" :key="i">{{ i }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item v-if="['公积金增员异常','公积金减员异常','社保增员异常','社保减员异常'].includes(typeName)" :label="typeName == '社保减员异常' || typeName == '公积金减员异常' ?'停缴月份':'起缴月份'" prop="month">
        <a-month-picker :value="addInfoState.month ? moment(addInfoState.month, 'YYYYMM') : ''" @change="onChangeDate" format="YYYYMM" />
      </a-form-model-item>
      <a-form-model-item label="上传文件" prop="url">
        <a-upload list-type="picture-card" :action="get_OSS_config" :customRequest="onUpload" :multiple="true" :file-list="addInfoState.fileUrls">
          <div v-if="addInfoState.fileUrls.length < 8">
            <a-icon type="plus" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="异常描述" prop="abnormal">
        <a-textarea v-model="addInfoState.abnormal" :max-length="300" :auto-size="{ minRows: 5 }" placeholder="请输入异常描述" allow-clear />
        <span style="position: absolute;right: 10px;bottom: -5px;color: #ccc;">{{ addInfoState.abnormal.length }}/300</span>
      </a-form-model-item>
    </a-form-model>
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <!-- <a-button type="primary" @click="onSave">仅保存</a-button> -->
      <a-button type="primary" @click="onSaveExport">保存并转出</a-button>
    </template>
  </a-modal>
</template>

<script>
import moment from 'moment';
import { get_OSS_config } from '@/services/api';
import { upLoadAliyun } from '@/utils/util';
export default {
  name: 'exportModal',
  props: {
    addInfoModal: {
      type: Boolean,
      default: false,
    },
    typeName: String,
    month: String,
  },
  watch: {
    month: {
      handler (val) {
        this.addInfoState.month = val
      },
    },
  },
  data () {
    return {
      get_OSS_config: get_OSS_config,
      makeUpMonthList: [],
      addInfoState: {
        month: '',
        fileUrls: [],
        abnormal: '',
        makeUpMonth: [],
      },
      addInfoRules: {
        month: [{ required: true, message: '请选择起缴月份！', trigger: 'change' }],
        makeUpMonth: [{ required: true, message: this.typeName == '社保减员异常' || this.typeName == '公积金减员异常' ? '请选择停缴月份！' : '请选择补缴月份！', trigger: 'change', }],
      },
    };
  },
  methods: {
    moment,
    onSave () { },
    onSaveExport () {
      this.$refs.addInfo.validate(valid => {
        if (valid) {
          this.$emit('cancelModal', {
            modal: '补充信息',
            str: 'ok',
            data: { addInfoState: this.addInfoState, taskType: this.taskType },
          });
        } else {
          return false;
        }
      });
    },
    handleCancel () {
      this.$refs.addInfo.resetFields();
      this.$emit('cancelModal', { modal: '补充信息', str: 'cancel' });
    },
    onChangeDate (date, dateString) {
      this.addInfoState.month = dateString;
      this.addInfoState.makeUpMonth = [];
    },
    getMakeUpMonth () {
      var dataArr = [];
      var data = new Date();
      data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份
      for (var i = 0; i < 12; i++) {
        data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
        var m = data.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        dataArr.push(data.getFullYear() + '-' + m);
      }
      return dataArr;
    },
    handleChangeMakeUpMonth (val) {
      this.addInfoState.makeUpMonth = val;
      this.addInfoState.month = '';
    },
    onUpload (info) {
      upLoadAliyun(info).then(res => {
        this.addInfoState.fileUrls.push({ uid: res.etag, name: res.name, status: 'done', url: res.filePath });
      });
    },
  },
  mounted () {
    this.makeUpMonthList = this.getMakeUpMonth();
  },
};
</script>

<style></style>
